<template>
  <div class="cmt-container">
    <h3>发表评论</h3>
    <hr>
    <!--评论内容-->
    <textarea placeholder="请输入评论" maxlength="120" v-model="msg"></textarea>
    <!--发表评论按钮-->
    <mt-button class="mui-btn-primary" size="large" @click="postComments()">发表评论</mt-button>
    <!--渲染评论-->
    <div class="cmt-list">
      <div class="cmt-item" v-for="(item, i) in comments" :key="item.username">
        <div class="cmt-title">
          第{{i+1}}楼 用户：{{item.username}} 发表时间：{{item.add_time | dateFormat}}
        </div>
        <div class="cmt-body">
            <span>{{item.content}}</span>
        </div>
      </div>
    </div>
    <!--加载更多的评论-->
    <mt-button style="margin-bottom: 50px" class="mui-btn-danger" @click="moreComments()" size="large" plain>加载更多</mt-button>

  </div>
</template>

<script>
// 导入提示组件
import { Toast } from 'mint-ui'

export default {
  name: 'Comment',
  data () {
    return {
      msg: '',
      comments: [
        { username: '张三', add_time: '2020-06-18 12:12:30', content: '好玩' },
        { username: '李四', add_time: '2020-09-12 12:12:30', content: '嘿嘿' },
        { username: '王五', add_time: '2020-06-11 12:12:30', content: '拉拉' },
        { username: '李峰', add_time: '2020-06-19 12:12:30', content: '呼呼' },
        { username: '天天', add_time: '2020-06-16 12:12:30', content: '噜噜' },
        { username: '澹台', add_time: '2020-06-28 12:12:30', content: '卡卡' }
      ] // 所有的评论数据
    }
  },
  methods: {
    postComments () {
      if (this.msg.trim().length === 0) {
        return Toast('请输入评论内容！')
      }
      this.comments.unshift({ username: '匿名用户', add_time: Date.now(), content: this.msg })
      // 添加评论成功，清空评论的信息
      this.msg = ''
    },
    moreComments () {
      this.comments.push({ username: '匿名用户', add_time: Date.now(), content: '更多的信息' })
    }
  }
}
</script>

<style scoped lang="scss">
.cmt-container{
  h3{
    font-size: 18px;
  }
  textarea{
    font-size: 14px;
    height: 85px;
    margin: 0;
  }

  .cmt-list{
    margin: 5px 0;
    .cmt-item{
      font-size: 13px;
      .cmt-title{
        line-height: 30px;
        background-color: #8f8f94;
      }
      .cmt-body{
        line-height: 35px;
        text-indent: 2em;
      }
    }
  }
}
</style>
